<template> 
  <div class="wrapper">
    <swiper :options="swiperOption" ref="mySwiper" v-if="showSwiper">
      <swiper-slide v-for="item in swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  components: {
  },
  // props: {
  //   list: Array
  // },
  data () {
    return {
      swiperOption: {
        pagination: {
            el: '.swiper-pagination'
          },
        loop: true
      },
      swiperList: [
      {
        "id": "0001",
        "imgUrl": "https://fms.res.meizu.com/dms/2018/09/19/2e230b84-0259-44e3-a8af-1787b530d340.jpg"
      },{
        "id": "0002",
        "imgUrl": "https://fms.res.meizu.com/dms/2018/09/19/43b6f523-9010-4f21-9a20-981e8fd2f7a8.jpg"
      },{
        "id": "0003",
        "imgUrl": "https://fms.res.meizu.com/dms/2018/10/25/e089566a-f02a-4519-9d9e-d70eb38cbcf7.jpg"
      },{
        "id": "0004",
        "imgUrl": "https://fms.res.meizu.com/dms/2018/11/02/fd67a7ef-4945-45eb-a45e-2c9ee9180d05.jpg"
      },{
        "id": "0005",
        "imgUrl": "https://fms.res.meizu.com/dms/2018/09/29/c4ab2ad9-bdc9-4cd9-8326-eb97d38e589a.jpg"
      },{
        "id": "0006",
        "imgUrl": "https://fms.res.meizu.com/dms/2018/10/15/55b37ca3-408b-4618-b14a-861d37a21437.jpg"
      }]
    }
  },
  computed: {
    showSwiper() {
      return this.swiperList.length
    }
  },
  mounted() {
    
  }
}
</script>

<style lang="stylus" scoped>
  //  >>>  可以 透过scoped 改变其它组件的样式
  .wrapper >>> .swiper-pagination-bullet-active
    background: #fff
  .wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 51.9%
    padding-top: 1.6rem
    .swiper-img
      width: 100%
</style>
